<!DOCTYPE html>
<html>
<head>
    <!--	<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">-->
    <link rel="icon" type="icon" href="favicon.ico">
    <link href="favicon.ico" rel="icon" type="image/x-ico">
    <title>长藤医院</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/login.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js"></script>
    <link rel="stylesheet" href="../css/style.css" type="text/css" media="all">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
</head>
<body>

<h1>长藤医院智能系统</h1>
<div class="container w3layouts agileits">
    <div id="c1" style="display: none;z-index: 100;position: absolute;margin-left: 10%;margin-top: 300px"></div>
    <div class="login w3layouts agileits" id="login">
        <h2 style="text-align: center; margin-left: -40px">登 录</h2>

        <form action="javascript:void(0)" class="box" method="post">
            <input id="loginUsername" type="text" name="username" placeholder="用户名" style="margin-left:20%">
            <input id="loginPassword" type="password" name="password" placeholder="密码" style="margin-left:20%">
        </form>

        <div class="send-button w3layouts agileits">
            <form action="javascript:void(0)" class="box">
                <input type="submit" value="登 录" style=" margin-top: 165px;margin-left: 125px" onclick="login()">
            </form>
        </div>
        <ul class="tick w3layouts agileits" style="margin-left: 20%">
            <li>
                <input type="checkbox" id="brand1" value="">
                <label for="brand1" style="float: left"><span></span><font size="3px">记住我</font></label>
            </li>
        </ul>
        <a href="#" style="margin-left: 20%">忘记密码?</a>
        <div class="social-icons w3layouts agileits">
            <p>- 其他方式登录 -</p>
            <ul>
                <li class="qq"><a href="javascript:void(0)">
                    <span class="icons w3layouts agileits"></span>
                    <span class="text w3layouts agileits">QQ</span></a></li>

                <li class="weixin w3ls"><a href="javascript:void(0)">
                    <span class="icons w3layouts" onclick="phoneLogin()"></span>
                    <span class="text w3layouts agileits" onclick="phoneLogin();">微信</span></a></li>

                <li class="weibo aits"><a href="javascript:void(0)">
                    <span class="icons agileits"></span>
                    <span class="text w3layouts agileits">微博</span></a></li>
                <div class="clear"></div>
            </ul>
        </div>
        <a href="javascript:void(0)" onclick="Register();" style="float: right;margin-top: 20px"
           class="href1">没有账号？去注册</a>
        <div class="clear"></div>
    </div>


    <!--使用手机登录-->
    <div class="register w3layouts agileits" style="display:none" id="phoneLogin">
        <div onclick="loginHtml();" class="arrow"><a href="javascript:void(0)" class="href">返回</a></div>
        <h2 style="margin-left: 100px">手机登录</h2>

        <form action="javascript:void(0)" class="box" method="post">
            <input type="text" name="username" placeholder="请输入手机号" style="margin-left:20%">
            <span style="z-index: 9; color: white;margin-left: 180px;">获取验证码</span>
            <input type="password" name="password" placeholder="请输入验证码" style="margin-left:20%">
        </form>
        <div class="send-button w3layouts agileits">
            <form class="box">
                <input type="submit" value="登录" style=" margin-top: 85px;margin-left: 90px">
            </form>
        </div>
        <div class="clear"></div>
    </div>


    <!--注册部分-->
    <div class="register w3layouts agileits" style="display:none" id="register">
        <div onclick="loginHtml();" class="arrow" style="width: 60px"><a href="javascript:void(0)" class="href">返回</a>
        </div>
        <div style="margin:-20px 0px 20px 60px;width: 300px">
            <button  class="registerButton" id="yongHu" type="button" onclick="PUTONG();">普通用户</button>
            <button  class="registerButton" id="huShi" type="button" onclick="YISHENG();">医护人员</button>
        </div>
        <div>
            <h2 style="margin-left: 100px" id="1">用户注册</h2>
            <form action="javascript:void(0)" class="box" method="post" style="height: 450px">
                <span style="position:absolute;margin: 20px 0 0 -20px;">aaaa</span><input onblur="checkBianHao();" type="password" name="code" placeholder="请输入医护编号" id="bianHao" style="margin-left:20%;display: none">
                <span style="position:absolute;margin: 20px 0 0 -20px;">aaaa</span><input type="text" name="username" placeholder="请输入用户名" style="margin-left:20%;z-index:1000">
                <span style="position:absolute;margin: 20px 0 0 -20px;">aaaa</span><input type="text" name="password" placeholder="请输入密码" style="margin-left:20%">
                <span style="position:absolute;margin: 20px 0 0 -20px;">aaaa</span><input type="text" name="checkPassword" placeholder="请再次输入密码" style="margin-left:20%">
                <span style="position:absolute;margin: 20px 0 0 -20px;">aaaa</span><input type="text" name="phoneNumber" id="phoneNumber" placeholder="请输入手机号" style="margin-left:20%">
                <span style="position:absolute;margin: 20px 0 0 -20px;">aaaa</span><div class="background" id="safeCheck" style="height:10px">
                    <input type="checkbox" id="button">
                    <label for="button" class="button" onclick="yanZheng();"> 安全验证<i class="fas fa-check"></i></label>
                    <svg class="circle">
                        <circle cx="32" cy="32" r="31"/>
                    </svg>
                </div>
<!--                <span style="z-index: 9; color: white;margin-left: 180px;display: none;" id="phoneCode"> -->
                <input id="phoneCode" onclick="settime(this)" type="submit" value="获取验证码" style="display: none;margin: 10px -10px 0px 130px;" />
                <input type="password" name="code" id="codeNumber" placeholder="请输入验证码"
                       style="margin-left:20%;margin-top:52px">
            </form>
            <div class="send-button w3layouts agileits">
                <form class="box">
                    <input type="submit" id="submitRegister" value="注 册" style=" margin-top: 10px;margin-left: 90px">
                </form>
            </div>
        </div>
        <div class="clear"></div>
    </div>


    <!--背板样式-->
    <div class="clear"></div>

</div>

<!--底部-->
<div class="footer w3layouts agileits">
    <p>Copyright &copy; Chang Teng Hospital</p>
</div>
</body>

</html>


<script>
    function yanZheng() {
        setTimeout("show()", 2000);
    }

    function show() {
        document.getElementById('c1').style.display = "";
        document.getElementById('codeNumber').style.marginTop = "15px";
        document.getElementById('submitRegister').style.marginTop="-60px";
    }
    function hide() {
        document.getElementById('safeCheck').style.display = "none";
        document.getElementById('c1').style.display = "none";
    }

    var myCaptcha = _dx.Captcha(document.getElementById('c1'), {
        appId: 'f7f06614faf5b356060ecaadb4bb1780', //appId，在控制台中“应用管理”或“应用配置”模块获取
        success: function (token) {
            setTimeout("hide()", 1500);
            document.getElementById('phoneCode').style.display = "";
        }
    });

    var countdown=60;
    function settime(obj) {
        if (countdown === 0) {
            obj.removeAttribute("disabled");
            obj.value="获取验证码";
            countdown = 60;
            return;
        }else {
            obj.setAttribute("disabled", true);
            obj.value="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {
                settime(obj) }
            ,1000)
    }
    $('#phoneCode').on('click',function(e) {
            let phone = document.getElementById('phoneNumber').value;
            $.ajax({
                url: '/smsXxs',
                type: 'POST',
                data: {phone: phone},
                success: function (data) {
                    if (data == "0") {
                        alert("短信发送失败")
                    } else {
                        countdown = 60;
                        alert("短信发送成功")
                    }
                },
                error: function () {
                    alert("ajax请求失败")
                    console.log(data);
                }
            });
    })

</script>
<!--丑陋的样式设计-->
<style>
    .box input[type="submit"] {
        border: 0;
        background: none;
        display: block;
        margin: 30px 20px 20px 30px;
        text-align: center;
        border: 2px solid #2ecc71;
        padding: 14px 40px;
        outline: none;
        color: white;
        border-radius: 24px;
        transition: 0.25s;
        cursor: pointer;
        width: 150px;
    }

    .box input[type="submit"]:hover {
        background: #2ecc71;
        color: #ffc900;
    }
</style>
